<template>
  <view class="content">
    <text style="font-size: 36rpx; font-weight: bold;">子组件B</text>
    <!-- 展示兄弟组件A传递的值 -->
    <view class="b-box" style="margin-top: 20rpx; margin-left: 30rpx;">
      <text>CompA组件传进来的值:</text>
      <text class="intent-text-box" style="font-weight: bold; color: blue; margin-left: 10rpx;">{{ result }}</text>
    </view>
    <!-- 回传值给父组件的区域 -->
    <view class="b-box" style="margin: 30rpx 30rpx; display: flex; align-items: center;">
      <text>回传值:</text>
      <input 
        type="text" 
        v-model="callbackValue" 
        style="color: yellow; border: 1px solid #eee; padding: 10rpx; margin-left: 20rpx; flex: 1;" 
        placeholder="请输入回传值"
      />
      <button @click="sendOutside()" size="mini" style="margin-left: 20rpx;">回传</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      callbackValue: '', // 要回传给父组件的值
      result: '' // 接收兄弟组件A传递的值
    }
  },
  created() {
    // 监听兄弟组件A触发的全局事件
    uni.$on('getIntent', (msg) => {
      console.error("----子组件B接收A传递的值-->", msg);
      this.result = msg;
    });
  },
  methods: {
    // 回传值给父组件
    sendOutside() {
      console.warn("----子组件B回传值给父组件-->", this.callbackValue);
      // 触发自定义事件，将值传递给父组件
      this.$emit('callBackFun', this.callbackValue);
    }
  },
  // 页面卸载时移除事件监听，避免内存泄漏
  onUnload() {
    uni.$off('getIntent');
  }
}
</script>

<style scoped>
.content {
  background-color: #f9f0ff;
  padding: 20rpx;
  border-radius: 10rpx;
  margin: 0 30rpx;
}
</style>